import { CpuInfoMonitor, InfoSystem, MemInfoMonitor, NetworkLoadMonitor } from '@/components'
import { useDataRefresh } from '@/hooks'
import type { ComponentProps } from 'react'

export const AllMonitor: React.FC<ComponentProps<'div'>> = (props) => {
  // 启动数据自动刷新
  useDataRefresh()

  return (
    <div {...props} className="p-6 space-y-6 flex-1 overflow-auto">
      {/* 上方三个组件的行 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <InfoSystem />
        <CpuInfoMonitor />
        <MemInfoMonitor />
      </div>

      {/* 下方网络负载组件 */}
      <div className="grid grid-cols-1">
        <NetworkLoadMonitor />
      </div>
    </div>
  )
}
